<template>
  <div class="otherform">
    <div class="formPreview">
      <div class="item-warp-c">
        <div class="form-item">
          <div class="f-label">流程标题：</div>
          <div v-if="tableData1.length > 0" class="f-value">{{tableData1[0].title}}</div>
        </div>
      </div>
      <p-table class="table1" :pagination="false" bordered :columns="columns1" :datp-source="tableData1">
        <div class="span-ellipsis" slot="matters" slot-scope="row">
          <p-input :maxLength="50" v-if="status === 'create'" size="small" v-model="row.matters" placeholder="请输入"></p-input>
          <span v-else :title="row.matters">{{row.matters}}</span>
        </div>
      </p-table>
      <div v-if="status === 'create'" style="margin: 30px 0 0;text-align: center;">
        <p-button @click="submit" :loading="loadingSum" type="primary">提交</p-button>
      </div>
    </div>
    <div class="table2" v-if="status === '2' || status === '1'">
      <p-table :pagination="false" bordered :columns="columns2" :datp-source="tableData2">
        <div class="span-ellipsis" slot="province" slot-scope="row">
          <p-input :maxLength="50" v-if="showInput" size="small" v-model="row.province" placeholder="请输入"></p-input>
          <span v-if="showSpan" >{{row.province}}</span>
        </div>
        <div class="span-ellipsis" slot="month" slot-scope="row">
          <p-input :maxLength="50" v-if="showInput" size="small" v-model="row.month" placeholder="请输入"></p-input>
          <span v-if="showSpan" >{{row.month}}</span>
        </div>
        <div class="span-ellipsis" slot="type" slot-scope="row">
          <p-input :maxLength="50" v-if="showInput" size="small" v-model="row.type" placeholder="请输入"></p-input>
          <span v-if="showSpan" >{{row.type}}</span>
        </div>
        <div class="span-ellipsis" slot="company" slot-scope="row">
          <p-input :maxLength="50" v-if="showInput" size="small" v-model="row.company" placeholder="请输入"></p-input>
          <span v-if="showSpan" >{{row.company}}</span>
        </div>
        <div slot="estimatePrice" slot-scope="row">
          <p-input-number :max="1000000000000" v-if="showInput" size="small" v-model="row.estimatePrice" placeholder="请输入"></p-input-number>
          <span v-if="showSpan" >{{row.estimatePrice}}</span>
        </div>
        <div slot="arrivalPrice" slot-scope="row">
          <p-input-number :max="1000000000000" v-if="showInput" size="small" v-model="row.arrivalPrice" placeholder="请输入"></p-input-number>
          <span v-if="showSpan" >{{row.arrivalPrice}}</span>
        </div>
        <div slot="ascriptionBusiness" slot-scope="row">
          <p-input :maxLength="50" v-if="showInput" size="small" v-model="row.ascriptionBusiness" placeholder="请输入"></p-input>
          <span v-if="showSpan" >{{row.ascriptionBusiness}}</span>
        </div>
        <div class="span-ellipsis" slot="userName" slot-scope="row">
          <p-input :maxLength="50" v-if="showInput" size="small" v-model="row.userName" placeholder="请输入"></p-input>
          <span v-if="showSpan" >{{row.userName}}</span>
        </div>
      </p-table>
    </div>
  </div>
</template>
<script>
import Bus from '@/utils/bus'
import { timestampToDatetime, getParameterByName } from '@/utils/util'
import process from '@/api/process'
const columns1 = [
  {
    title: '发起部门',
    key: 'department',
    dataIndex: 'department',
    ellipsis: true,
  },
  {
    title: '发起人',
    key: 'name',
    dataIndex: 'name',
    ellipsis: true,
  },
  {
    title: '发起日期',
    key: 'date',
    dataIndex: 'date',
    ellipsis: true,
  },
  {
    title: '发起事宜',
    key: 'matters',
    ellipsis: true,
    scopedSlots: { customRender: 'matters' },
  },
];
const columns2 = [
  {
    title: '代表处',
    key: 'province',
    ellipsis: true,
    scopedSlots: { customRender: 'province' },
  },
  {
    title: '月份',
    key: 'month',
    width: 100,
    ellipsis: true,
    scopedSlots: { customRender: 'month' },
  },
  {
    title: '类型',
    key: 'type',
    ellipsis: true,
    scopedSlots: { customRender: 'type' },
  },
  {
    title: '客户单位',
    key: 'company',
    ellipsis: true,
    scopedSlots: { customRender: 'company' },
  },
  {
    title: '预计可签合同金额',
    key: 'estimatePrice',
    ellipsis: true,
    scopedSlots: { customRender: 'estimatePrice' },
  },
  {
    title: '本次确认销售金额',
    key: 'arrivalPrice',
    ellipsis: true,
    scopedSlots: { customRender: 'arrivalPrice' },
  },
  {
    title: '收入归属事业部',
    key: 'ascriptionBusiness',
    width: 160,
    ellipsis: true,
    scopedSlots: { customRender: 'ascriptionBusiness' },
  },
  {
    title: '责任人',
    key: 'userName',
    ellipsis: true,
    scopedSlots: { customRender: 'userName' },
  },
];
export default {
  props: {
    step: String,
    status: String,
    processInstanceId: String,
    taskId: String,
  },
  data() {
    return {
      processDefinitionName: '',
      loadingSum: false,
      columns1,
      columns2,
      formTitle: '',
      formDate: '',
      uid: '',
      tableData1: [
        /* {
          title: '流程标题xx',
          name: 'xx发起人',
          department: 'xx部门',
          date: 'xx日期',
          matters:'xx发起事宜',
        } */
      ],
      tableData2: [{
        key: 0,
        province: '',
        month: '',
        type: '',
        company: '',
        estimatePrice: '',
        arrivalPrice: '',
        ascriptionBusiness: '',
        userName: '',
      }],
    };
  },
  computed: {
    showSpan(){
      return this.status === '2' || ( this.status === '1' && this.step && this.step !== 'b');
    },
    showInput(){
      return this.status === '1' && this.step && this.step === 'b';
    },
  },
  methods: {
   submitForm2(event){
      process.addSaleDetail({
        processInstanceId: this.processInstanceId,
        saleInfoDetailParamList: this.tableData2,
      }).then( res =>{
        console.log('提交表单2成功',res);
        Bus.$emit('nextSubmit');
      })
    },
    submit(){
      this.loadingSum = true;
      process.saleInfo({
        "date": this.tableData1[0].date,
        "department": this.tableData1[0].department,
        "matters": this.tableData1[0].matters,
        "title": this.tableData1[0].title,
        "uid": this.uid,
        "processDefinitionKey": getParameterByName('processDefinitionKey'),
      }).then( res =>{
        this.$message.success('提交成功');
        if (window.opener && window.opener.dispatchEvent) {
            window.opener.dispatchEvent(new Event('getTableData'))
        } else {
            window.opener.fireEvent(new Event('getTableData'))
        }
        window.opener = null;
        window.open('', '_self');
        window.location.href="about:blank";
        window.close();
        this.loadingSum = true;
      }).catch( r =>{
        this.loadingSum = true;
      });
    }
  },
  created(){
    // 第一步
    if (this.status === 'create' ){
      this.formDate = timestampToDatetime(new Date().getTime(),1);
      process.getProcessParams(getParameterByName('processDefinitionKey')).then( res =>{
        const curData = res.data
        this.processDefinitionName = curData.processDefinitionName
        process.userInfo().then(res=>{
          if(res.code === 0) {
            const curData = res.data;
            this.formTitle = `${curData.name}申请的${this.processDefinitionName}${this.formDate}`;
            this.uid = curData.uid;
            this.tableData1 = [
              {
                key: 1,
                title: this.formTitle,
                name: curData.name,
                department: curData.departmentName,
                date: this.formDate,
                matters:'',
              }
            ]
          }else {
            console.log('报错了');
          }
        })
      })
    }else {
      // 获取当前人的uid
      process.userInfo().then(res=>{
        if(res.code === 0) {
          const curData = res.data;
          this.uid = curData.uid;
          if ( this.status === '2' ){
            let curUid = '';
            if ( this.step && this.step === 'b'){
              curUid = this.uid;
            }
            process.getSaleInfoDetail({
              "processInstanceId": this.processInstanceId,
              "uid": curUid,
            }).then( res =>{
              this.tableData2 = res.data || [];
              this.tableData2.forEach( (el, i) =>{
                el.key = i;
              });
            })
          }
          if ( this.status === '1' && (this.step && this.step !== 'b') ){
            process.getSaleInfoDetail({
              "processInstanceId": this.processInstanceId,
              "uid": '',
            }).then( res =>{
              this.tableData2 = res.data || [];
              this.tableData2.forEach( (el, i) =>{
                el.key = i;
              });
            })
          }
        }else {
          console.log('报错了');
        }
      })
      process.getSaleInfo({
        "processInstanceId": this.processInstanceId, // modelId
      }).then( res =>{
        const curData = res.data;
        this.tableData1 = [
          {
            ...curData,
            name: curData.userName,
            key: 1,
          }
        ]
      })
    }
  },
  mounted(){
    Bus.$on('prevSubmit',(val) =>{
      this.submitForm2();
      console.log('可以提交了 表单一数据',val);
    });
  }
};
</script>
<style lang="less">
.otherform{
  .demo-form-inline{
    display: flex;
    .el-form-item__label{
      padding: 0;
    }
  }
  .table1{
    // margin-bottom: 30px;
  }
  .table2{
    margin-top: 30px;
  }
  .span-ellipsis {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .formPreview{
    font-size: 14px;
    color: #606266;
    overflow: hidden;
    // display: flex;
    div.item-warp{
      // margin-right: 40px;
      display: flex;
      >div{
        margin-right: 40px;
      }
    }
    .form-item{
      display: flex;
      height: 28px;
      margin-bottom: 18px;
      justify-content: center;
    }
    .f-label,.f-value{
      display: flex;
      align-items: center;
      font-size: 16px;
    }
  }
}
</style>
